<script setup>

import {reactive, ref} from "vue";
import request from '@/utils/axiosUtils.js'
import {ElMessage} from "element-plus";

// 用户提问
const questions=reactive([])
// AI回答
const answers=reactive(["你好，我是AI医疗小助手，请问有什么可以帮助你的吗？"])

const input=ref();
const isLoading=ref(false)
const handleSubmit=()=>{
  if(isLoading===true){
    ElMessage.error("请勿重复提问...")
    return;
  }
  isLoading.value=true
  questions.push(input.value)
  input.value=""
  request.post(
      '/chat',
      {
        questions:questions,
        answers:answers
      }
  ).then(function (res) {
    isLoading.value=false
    answers.push(res.data.answer)
  }).catch(function (error) {
    ElMessage.error("服务器繁忙，请稍后再试")
    isLoading.value=false
  }).finally(() => {});
}

</script>

<template>

  <!-- 总容器 -->
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
      <p>AI问诊</p>
      <div></div>
    </header>
    <div class="top-ban"></div>

    <div class="chat-area" style="padding-bottom:80px">
      <div align="center">
        <div class="tip">
          本平台提供的 AI 回复内容仅供参考，不保证其准确性和完整性。请您在使用过程中注意甄别，并对自身行为负责。本平台不对 AI
          回复内容承担任何责任。
        </div>
      </div>
      <div v-for="index in answers.length" :key="index" >

        <div class="ai-message-item">
          <div class="ai-message">
            {{ answers[index-1] }}
          </div>
        </div>

        <div  v-show="questions[index-1]!==undefined" class="user-message-item">
          <div class="user-message">
            {{ questions[index-1] }}
          </div>
        </div>

      </div>
    </div>


    <div class="input-box">
      <el-input placeholder="请输入对话内容"
                @keyup.enter="handleSubmit"
                v-model="input"
                clearable size="large" style="padding: 2vh 3vw 2vh 3vw;">
        <template #append>
          <el-button @click="handleSubmit" v-loading="isLoading">
            <template #icon>
              <i class="fa fa-send"></i>
            </template>
          </el-button>
        </template>
      </el-input>
    </div>

  </div>



</template>

<style scoped>
@import "@/assets/css/appointment.css";
@import "@/assets/framework/reset.css";
@import "@/assets/framework/font-awesome/css/font-awesome.min.css";

body{
  scale: 50%;
}

.input-box {
  padding: 0vh 0vw 5vh 0vw;
  width: 100%;
  height: 10vw;
  position: fixed;
  bottom: 0;
  background-color: #f2f2f2;
}



.tip{
  width: 60vw;
  font-size: xx-small;
  background-color: #c5c5c5;
  color: #FFFFFF;
  padding: 1vw;
}

.ai-message{
  background-color: #FFFFFF;
  font-size: 2.25vh;
  box-shadow: 0 0 1vw 0 rgba(0, 0, 0, 0.3);
  margin: 2vh 5vw 2vh 5vw;
  padding: 1.25vh;
  border-radius: 1vw;
}

.ai-message-item{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: stretch
}

.user-message{
  background-color: #3D96F2;
  color: #FFFFFF;
  font-size: 2.25vh;
  box-shadow: 0 0 1vw 0 rgba(0, 0, 0, 0.3);
  margin: 2vh 5vw 2vh 5vw;
  padding: 1.25vh;
  border-radius: 1vw;
}

.user-message-item{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  align-content: stretch
}

.myicon{
  scale: 200%;
}

body {
  font-family: "Microsoft YaHei", sans-serif;
}

</style>